<template>
	<view class="technician" :class="[{'overflow':detailFlag}]">
		<!-- #ifndef H5 -->
		<topTitle :styles="{back:false,title:'技师列表',color:'#fff'}" />
		<!-- #endif -->
		<!-- <view class="exin" v-if="notFollow">
			<view class="logo">
				<image src="/static/images/logobo.png" mode=""></image>
			</view>
			<view class="text">
				关注公众号可及时获取订单状态和技师信息
			</view>
			<view class="button" @click="goFollow">
				立即关注
			</view>
			<view class="close" @click="closeFollow">
				<fui-icon name="close" size="32"></fui-icon>
			</view>
		</view> -->
		<view class="top_nav" :class="[{'not_follow':notFollow}]">
			<view class="flex top">
				<view class="left" @click="checkCity">
					<!-- <picker :range="cityArr" range-key="city_name" :value="index" @change="bindPickerChange">
						<view class="uni-input">
							{{cityArr[index].name}}
							<uni-icons type="bottom" size="15" color="#fff" class="input-icon"></uni-icons>
						</view>
					</picker> -->
					<view class="uni-input" style="color: #000;font-size: 30upx;" @click="pickerShow = true">
						{{city}}
						<uni-icons style="margin-left:10upx" type="bottom" size="15" color="#000" class="input-icon"></uni-icons>
					</view>
				</view>
				<view class="flex jus">
					<view class="main">
						<input v-model="searchName" placeholder="请输入技师姓名" placeholder-style="font-size:25rpx;" />
					</view>  
					<view class="attention" @click="guanzhu">
						<fui-icon name="like" :size="40" fontWeight="600"></fui-icon>
						<text>我的关注</text>
					</view>
				</view>
			</view>
		</view>
		<view class="list_container">
			<view class="list" v-if="!notList" v-for="(item,index) in technicianList" :key="index">
				<view class="top">
					<view class="left">
						<image @click="goDetail(item)" :src="item.cover" mode=""></image>
					</view>
					<view class="right">
						<view class="right_top">
							<view class="top_left">
								<view class="name">
									{{item.name}}
								</view>
								<view class="inoculation">
									<image src="/static/images/dunpai.png" mode=""></image>
									<text>已接种</text>
								</view>
							</view>
							<view class="top_right">
								<fui-icon name="location-fill" :size="35"></fui-icon>
								<view class="distance">{{item.distance}}</view>
							</view>
									
						</view>
						<view class="right_top">
							<view class="top_left">
								<view class="score">
									<fui-icon name="star-fill" color="#fe6d1b" :size="40"></fui-icon>
									<text>{{item.score}}</text>
								</view>
								<view class="served">
									已服务{{item.sales}}
								</view>
							</view>
							<view class="top_right">
								<view class="time">最近可约 {{item.service_time}}</view>
							</view>
						</view>
						<view class="right_top">
							<view class="top_left">
								<view class="comment">
									关注 {{item.collects}}
								</view>
								<view class="comment" @click="getDetail(index)">
									评论 {{item.comments}}
								</view>
							</view>
							<view class="top_right" @click="preveImage(item.images)">
								<image v-if="index <=2" v-for="(items,index) in item.images" :key="index" :src="items" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				<view class="bot">
					<view class="btn_f" @click="collection(item.id)" v-if="item.is_collect == 1">
						<image src="/static/images/guanzhu.png" mode=""></image>
						已关注
					</view>
					<view class="btn_f" @click="collection(item.id)" v-else>
						<image src="/static/images/guanzhu.png" mode=""></image>
						关注
					</view>
				<!-- 	<view class="btn_l">
						立即预约
					</view>
					<view class="btn_l">
						服务中
					</view> -->
					
					<view class="btn_l" v-if="item.is_busy == 0"  @click="subscribe(index)">
						立即预约
					</view>
					<!-- <view class="btn_l" v-if="item.is_busy == 0"  @click="subscribe(index)">
						<wx-open-subscribe template="r3ndP4hp5nydwWZN6JpIToHKhSLqJw38bvX-7PnEQ34" id="subscribe-btn">
						  <script type="text/wxtag-template" slot="style">
						    <style>
						      .subscribe-btn {
						        color: #fff;
						        background-color: #07c160;
						      }
						    </style>
						  </script>
						  <script type="text/wxtag-template">
						    <button class="subscribe-btn btn_l" @click="subscribe(index)">
						      立即预约              
						    </button>
						  </script>
						</wx-open-subscribe>
					</view> -->
					<view class="btn_l" style="background:#FF8936;" v-else-if="item.is_busy == 1"  @click="subscribe(index)">可预约</view>
					<view class="btn_l is_busy" v-else>服务中</view>
				</view>
			</view> 
		</view>
		<view class="technician_details" v-show="detailFlag" @touchmove.stop="moveHandle">
			<!-- 遮罩层 -->
			<view class="top_seat" @click="closeMask"></view>
			<!-- 技师信息 -->
			<view class="comment">
				<view class="js_introduce">
					<view class="js_photo">
						<image :src="technicianDetail.cover" mode=""></image>
					</view>
					<view class="js_message">
						<view class="top_msg">
							<text class="technician_name" v-if="technicianDetail.name">{{technicianDetail.name}}</text>
						</view>
						<view class="Introduction">
							{{technicianDetail.detail}}
						</view>
					</view>
				</view>
				<view class="aptitude">
					<view class="">
						<image src="/static/images/technician/security.png" mode=""></image>
						<text>实名认证</text>
					</view>
					<view class="">
						<image src="/static/images/technician/refund.png" mode=""></image>
						<text>爽约包退</text>
					</view>
					<view class="">
						<image src="/static/images/technician/certificate.png" mode=""></image>
						<text>资质证书</text>
					</view>
				</view>
				<!-- 评论列表 --> 
				<scroll-view scroll-y @scrolltolower="scrolltolower"  class="comment_list" :class="{'no_item':commentList.length == 0}" v-if="!subscribeFlag">
					<view class="comment_list_item" v-for="(item,index) in commentList" :key="index">
						<view class="user_detail">
							<view class="user_name">
								<text>{{item.nickname}}</text>
								<uni-rate allow-half :value="technicianDetail.score" size="14" color="#999"
									active-color="#ff6051" :readonly="true" :is-fill="false" />
							</view>
							<view class="comment_time">
								{{item.create_time.split(' ')[0]}}
							</view>
						</view>
						<view class="comment_tags">
							<view class="tags_item" v-for="(items,index) in item.tags" :key="index">
								{{items}}
							</view>
						</view>
						<view class="comment_text">{{item.comment_text}}</view>
						<view class="comment_label">
		
						</view>
					</view>
					<view class="no_comment" v-if="commentList.length == 0">暂无评论</view>
				</scroll-view>
				<!-- 预约项目 -->
				<scroll-view scroll-y class="project_list" v-else >
					<view class="project_list_item" v-for="(item,index) in projectList" :key="index">
						<view class="image">
							<image :src="item.cover" mode=""></image>
						</view>
						<view class="project_content">
							<view class="project_detail">
								<view style="display: flex;">
									<view class="title" v-if="item.name">{{item.name}}</view>
									<view class="time">
										<view class="time_image">
											<image src="/static/images/time.png" mode=""></image>
										</view>
										<text>{{item.duration}}分钟</text>
									</view>
								</view>
								<view class="content">
									<view class="price">￥<text>{{item.price}}</text></view>
									<view class="number">
										{{item.sales}}人选择
									</view>
								</view>
		
							</view>
							<view class="project_num">
								<uni-icons type="minus" size="30" style="color: #0DAB57;" @click="changeNum(index,1)">
								</uni-icons>
								<text style="flex: 1;text-align: center;">{{item.projecNum}}</text>
								<uni-icons type="plus-filled" size="30" style="color: #00AC50;"
									@click="changeNum(index,2)"></uni-icons>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="submit" v-if="subscribeFlag">
			<view class="all_price">合计：￥<text>{{allPrice.toFixed(2)}}</text></view>
			<view class="submit_button" @click="goOrderPay">提交订单</view>
		</view>
		<!-- <fui-dialog :show="show" title="立即关注公众号" color="#24D572" :content="content" :buttons="buttons" maskClosable @click="confirm" @close="cancel"></fui-dialog> -->
		<fui-landscape :show="show" position="3" maskClosable @close="cancel">
			<image class="fui-hd__img" @click.stop="confirm" src="/static/images/follow.png" mode="widthFix"></image>
		</fui-landscape>
		<fui-loading v-if="showloadding"></fui-loading>
		<fui-picker :options="cityArr" :linkage="true" :show="pickerShow" @change="pickerChange" @cancel="pickerCancel"></fui-picker>
	</view>
</template>
<!-- <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> -->
<script>
	// #ifdef H5
	import wx from "weixin-js-sdk"
	// #endif
	import topTtile from "@/components/topTitle.vue"
	import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue"
	import fuiLandscape from "@/components/firstui/fui-landscape/fui-landscape.vue"
	export default {
		components: {
			topTtile,
			fuiIcon,
			fuiLandscape,
		},
		data() {
			return {
				userInfo: {},
				technician: '',
				city: '',
				cityArr: [],
				index: 0,
				searchName: '',
				technicianList: [],
				technicianDetail: {},
				detailFlag: false,
				commentList: [],
				subscribeFlag: false,
				maxHeight: '',
				projectListConstant: [],
				projectList: [],
				page: 1,
				limit: 10,
				latLon: {},
				checkCityFlag: false,
				notList: false,
				optionId: "",
				commentPage: 1,
				commentLimit: 10,
				technicianId: '',
				listPage:1,
				listLimit:10,
				notFollow:false,
				content: '可及时获取订单状态和技师信息',
				show: false,
				buttons:[
					{
						text: '不关注',
						color: '#ccc'
					},
					{
						text: '关注',
						color: '#24D572'
					},
				],
				force_login:false,
				phone_login:false,
				firstOnShow: 0,
				showloadding:false,
				city_id:'',		//城市id
				pickerShow:false,
			};
		},
		computed: {
			allPrice() {
				var price = 0
				console.log(this.projectList,'--------------1231234444')
				if(this.projectList.length >0){
					this.projectList.forEach((item, index) => {
						if (item.num != 0) {
							price += Number(item.projecNum) * Number(item.price)
						}
					})
				}
				return price
			}
		},
		watch:{
			searchName(){
				this.searchJs()
			}
		},
		onLoad(option) {
			let that = this
			this.getForce()
			if(!uni.getStorageSync('channel_id')){
				let channel_id = option.channel_id || 0;
				uni.setStorageSync('channel_id', channel_id)
			}
			if(uni.getStorageSync('token')){
				this.getUserInfo(this.force_login)
			}
			console.log(option, '-------------------------option')
			// this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
			if (option.id) {
				this.optionId = option.id
				uni.removeStorageSync('order_url')
			}
			uni.getSystemInfo({
				success: (res) => {
					this.maxHeight = res.windowHeight - res.windowBottom - res.windowTop
				}
			})
			this.projectListConstant = JSON.parse(JSON.stringify(this.projectList))
			// this.latLon = JSON.parse(uni.getStorageSync('latLon'))
			uni.showLoading({
				title: '获取位置中...',
			})
			console.log(uni.getStorageSync('latLon'),'--------------------缓存地址')
			this.rigester()
			this.getProject()
			this.getLocation()
			// uni.hideLoading()
			
		},
		onShow() {
			this.visitRecord()
			this.getUserInfo(this.force_login)
			// #ifdef H5
			setTimeout(()=>{
				if(navigator.userAgent.toLowerCase().indexOf('micromessenger') != -1){
					let notFollow = sessionStorage.getItem('not_follow');
					let is_follow = sessionStorage.getItem('is_follow')
					console.log(this.userInfo,'userInfo')
					console.log(notFollow,'----------------------------------notFollow')
					if(this.userInfo.subscribe == 0){
						if(!notFollow){
							this.notFollow = true;
						}else{
							this.notFollow = false;
						}
					}
				}
			},500)
			// #endif
			
		},
		onPullDownRefresh() {
			// 获取技师列表
			this.listPage = 1;
			this.getLocation()
		},
		onReachBottom() {
			this.listPage++;
			uni.showLoading({
				title:'加载中...'
			})
			this.getTechnicianList()
		},
		//点击了tabbar清空首页带过来的 服务Id
		onTabItemTap() {
			this.optionId = ""
		},
		methods: {
			pickerChange(e){
				console.log(e)
				this.city = e.text 
				this.getTechnicianList()
				this.pickerCancel()
			},
			pickerCancel(){
				this.pickerShow = false;
			},
			moveHandle(){
				return;
			},
			//用户访问日志
			visitRecord(){
				// #ifdef H5
				navigator.geolocation.getCurrentPosition((res) => {
					this.$http({
						url:'/api/view_log',
						method:'post',
						data:{
							page:2,
							latitude:res.coords.latitude,
							longitude:res.coords.longitude
						},
						success:result=>{
							console.log(result)
						}
					})
				}, function(error) {
					uni.showToast({
						title: '加载失败,请刷新重试',
						icon: "none"
					})
				});
				
				// uni.getLocation({
				// 	type: 'gcj02',
				// 	isHighAccuracy:true,
				// 	highAccuracyExpireTime:3000,
				// 	success: (res) => {
				// 		this.$http({
				// 			url:'/api/view_log',
				// 			method:'post',
				// 			data:{
				// 				page:2,
				// 				latitude:res.latitude,
				// 				longitude:res.longitude
				// 			},
				// 			success:result=>{
				// 				console.log(result)
				// 			}
				// 		})
				// 	}
				// })
				// #endiff
				// #ifdef APP-PLUS
				let locationType = '';
				if (uni.getSystemInfoSync().platform =='android') { //android终端
					locationType = 'gcj02'
				} else if (uni.getSystemInfoSync().platform == "ios") { //ios终端
					locationType = 'wgs84'
				}
				uni.getLocation({
					type:locationType,
					success: (res) => {
						this.$http({
							url:'/api/view_log',
							method:'post',
							data:{
								page:1,
								latitude:res.latitude,
								longitude:res.longitude
							},
							success:result=>{
								console.log(result)
							}
						})
					},
				})
				// #endif
			},
			getLocationV2() {
				let url = 'https://h6.niyuedaojia.cn/'//window.location.href.split("#")[0]
				// 这里是后去config得基本信息（跟后端要接口 wx.$api.index.wpaySubscribeH5Info  别看不懂，这是封装的请求接口而已换成你自己的就行了）
				this.$http({
					url:'/api/wechat/share?url='+url,
					method:'get',
					success:result=>{
						  console.log(result,'-------------------------分享')
						  let data = result.data.info;
						  this.templateIds = data.template_id;
						  let that = this;
						  // #ifdef H5
						  wx.config({
						  	debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						  	appId: data.appId, // 必填，公众号的唯一标识
						  	timestamp: data.timestamp, // 必填，生成签名的时间戳<?= $data['timestamp']?>
						  	nonceStr: data.nonceStr, // 必填，生成签名的随机串<?= $data['noncestr']?>
						  	signature: (data.signature).toLowerCase(), // 必填，签名<?= $data['signature']?>
						  	jsApiList:['getLocation'] ,// 这里先声明我们要用到打开地图的JS接口
						  	openTagList:['wx-open-subscribe']
						    });
						    // config 准备好了那么就开始操作了，
						    wx.ready(() => {
						    console.log(result,'-------------------------分享111')
						    
						    	uni.showLoading({
						    		title:'加载中...'
						    	})
						    wx.getLocation({
						      type: 'wgs84', // 默认为wgs84的 gps 坐标，如果要返回直接给 openLocation 用的火星坐标，可传入'gcj02'
						      success: function (res) {
						  		console.log(res,'------------------------地址')
						    	  that.latLon = {
						    	  	"latitude": res.latitude,
						    	  	"longitude": res.longitude,
						    	  }
						    	  // 获取技师列表
						    	  that.listPage = 1;
						    	  that.getTechnicianList()
						      }
						    });
						  	 that.$forceUpdate()
						  })
						  // #endif
						 
					}
				})
			},
			getLocation(){
				// uni.showLoading({
				// 	title:'刷新中...',
				// 	mask:true,
				// })
				this.showloadding = true;
				// if (this.firstOnShow == 1) {
					// #ifdef H5
					navigator.geolocation.getCurrentPosition((res) => {
						console.log(res, '----------------------获取地址res')
						this.latLon = {
							"latitude": res.coords.latitude,
							"longitude": res.coords.longitude,
						}
						console.log(this.latLon,'------------------------123123123')
						// this.listPage = 1;
						// this.technicianList = []
						this.getCity()
						
					}, function(error) {
						uni.showToast({
							title: '加载失败,请刷新重试',
							icon: "none"
						})
					});
					
					
					// uni.getLocation({
					// 	type: 'gcj02',
					// 	isHighAccuracy:true,
					// 	highAccuracyExpireTime:3000,
					// 	success: (res) => {
					// 		console.log(res, '----------------------获取地址res')
					// 		this.latLon = {
					// 			"latitude": res.latitude,
					// 			"longitude": res.longitude,
					// 		}
					// 		console.log(this.latLon,'------------------------123123123')
					// 		// this.listPage = 1;
					// 		// this.technicianList = []
					// 		this.getCity()
					// 	}
					// })
					// #endif
					// #ifdef APP-PLUS
					let locationType = '';
					if (uni.getSystemInfoSync().platform =='android') { //android终端
						locationType = 'gcj02'
					} else if (uni.getSystemInfoSync().platform == "ios") { //ios终端
						locationType = 'wgs84'
					}
					uni.getLocation({
						type:locationType,
						success: (res) => {
							console.log(res, '----------------------获取地址res')
							this.latLon = {
								"latitude": res.latitude,
								"longitude": res.longitude,
							}
							console.log(this.latLon,'------------------------123123123')
							// this.listPage = 1;
							// this.technicianList = []
							this.getCity()
						}
					})
					// #endif
					
				// } 
				// else {
				// 	this.listPage = 1;
				// 	this.technicianList = []
				// 	this.getCity()
				// }
			},
			hideGallery(){
				this.showGallery = false;
				this.urlGallery = [];
			},
			//强制登录配置
			getForce(){
				this.$http({
					url:'/api/config',
					method:'get',
					success:result=>{
						console.log(result,'------------------------getForce')
						this.force_login = result.data.force_login
						this.phone_login = result.data.phone_login
					}
				})
			},
			rigester(){
				// #ifdef H5
				let url = window.location.href.split("#")[0]
				// #endif
				this.$http({
					url:'/api/wechat/share?url='+url,
					method:'get',
					success:result=>{
						console.log(result,'-------------------------分享')
						let data = result.data.info;
						let that = this;
						// #ifdef H5
						wx.config({
						    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						    appId: data.appId, // 必填，公众号的唯一标识
						    timestamp: data.timestamp, // 必填，生成签名的时间戳<?= $data['timestamp']?>
						    nonceStr: data.nonceStr, // 必填，生成签名的随机串<?= $data['noncestr']?>
						    signature: (data.signature).toLowerCase(), // 必填，签名<?= $data['signature']?>
						    jsApiList:[] ,// 这里先声明我们要用到打开地图的JS接口
							openTagList:['wx-open-subscribe']
						});
						wx.ready(function(){
							console.log('注册成功')
						})
						wx.error(function(err){
							console.log(err,'-----------注册失败')
						})
						// #endif
					}
				})
			},
			//获取用户信息
			getUserInfo(forceType){
				this.$http({
					url:'/api/user/info',
					method:'get',
					data:{
						is_login:false,
						is_force:forceType
					},
					success:result=>{
					console.log(result)
						if(result.code  == 200){
							this.userInfo = result.data.info
							uni.setStorageSync('userInfo',JSON.stringify(this.userInfo))
						}
					}
				})
			},
			//关闭顶部横栏
			closeFollow(){
				console.log('123')
				sessionStorage.setItem('not_follow',true)
				this.notFollow = false;
			},
			//关注
			goFollow(){
				window.location.href = "https://mp.weixin.qq.com/s?__biz=MzkxOTQyMzMyOQ==&mid=2247484139&idx=1&sn=954c991df9762d5775ae82a4883538d5&chksm=c1a312e5f6d49bf3e8c63cf1dbd5c26e569a05b821284a7be541d0b4aac0cee0011fa30cc8a7#rd"
			},
			//弹窗按钮
			confirm(e){
				this.goFollow()
				this.show = false;
			},
			cancel(){
				sessionStorage.setItem('is_follow',true)
				this.notFollow = true; 
				this.show = false;
			},
			scrolltolower(e){
				console.log(e,'-----------------e')
				uni.showLoading({
					title:'加载中...'
				})
				this.commentPage++;
				this.getComments()
			},
			//获取城市列表
			getCityList() {
				this.$http({
					url: '/api/city_list',
					method: 'get',
					success: result => {
						console.log(result, '-------------------城市列表')
						result.data.list.forEach((item,index)=>{
							item.text = item.name
							item.value = item.id
						})
						this.cityArr = result.data.list
					}
				})
			},
			//选择城市
			checkCity() {
				return false;
				if (this.cityArr[0].city_name == "选择城市") {
					this.cityArr.splice(0, 1)
				}
			},
			//头像图片预览
			preview(data) {
				var arr = []
				arr.push(data)
				uni.previewImage({
					urls: arr,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			//技师详情
			goDetail(data) {
				if(!uni.getStorageSync('token')){
					uni.showToast({
						title: '请登录',
						icon: "none"
					})
					// #ifdef H5
					if (navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1) {
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/login/index'
							})
						}, 1000)
					} else {
						let url = ''
						if(this.phone_login){
							url = '/pages/login/login'
						}else{
							url = '/pages/login/index'
						}
						setTimeout(() => {
							uni.navigateTo({
								url:url
							})
						}, 1000)
					}
					// #endif
					// #ifdef APP-PLUS
					uni.navigateTo({
						url: '/pages/login/login'
					})
					// #endif
					return false;
				}else{
					this.preveImage([data.cover])
				}
				// 进入详情
				return false;
				//暂停进入
				uni.setStorageSync('technician_id', data.id)
				uni.navigateTo({
					url: '/pages/technician/detail/detail',
				})
				
			},
			//更多照片
			preveImage(data) {
				if (!uni.getStorageSync('token')) {
					uni.showToast({
						title: '请登录',
						icon: "none"
					})
					// #ifdef H5
					if (navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1) {
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						}, 1000)
					} else {
						let url = ''
						if(this.phone_login){
							url = '/pages/login/login'
						}else{
							url = '/pages/login/index'
						}
						setTimeout(() => {
							uni.navigateTo({
								url:url
							})
						}, 1000)
					}
					// #endif
					// #ifdef APP-PLUS
					uni.navigateTo({
						url: '/pages/login/login'
					})
					// #endif
					return false;
				}
				// 预览图片
				uni.navigateTo({
					url:'/pages/technician/list/preveImage?preveImage='+ JSON.stringify(data)
				})
				// this.showGallery = true;
				// this.urlGallery = data;
				// uni.previewImage({
				// 	urls: data,
				// 	longPressActions: {
				// 		itemList: ['发送给朋友', '保存图片', '收藏'],
				// 		success: function(data) {
				// 			console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
				// 		},
				// 		fail: function(err) {
				// 			console.log(err.errMsg);
				// 		}
				// 	}
				// });
			},
			//收藏技师
			collection(id) {
				let that = this;
				this.$http({
					url: `/api/technician/collect/${id}`,
					method: 'post',
					success: result => {
						if (result.code == 200) {
							this.listPage = 1;
							this.technicianList = [];
							that.getTechnicianList()
							uni.showToast({
								title: result.msg,
								icon: "none",
								duration: 1500
							})
							that.$forceUpdate()
						}
					}
				})

			},
			visa(data) {
				if(!data.shop) return false;
				uni.navigateTo({
					url: '/pages/technician/visa/visa?data=' + JSON.stringify(data)
				})
			},
			getDetail(i) {
				this.commentPage = 1;
				this.commentList = [];
				this.technicianDetail = JSON.parse(JSON.stringify(this.technicianList[i]))
				this.detailFlag = true
				this.getComments()
			},
			closeMask() {
				this.detailFlag = false
				this.subscribeFlag = false
				this.projectList = JSON.parse(JSON.stringify(this.projectListConstant))
			},
			bindPickerChange(e) {
				return false;
				console.log(e, '---------------------------e')
				this.index = e.detail.value
				this.city = this.cityArr[this.index].name
				uni.setStorageSync('cityIndex', this.cityArr[this.index].name)
				this.getTechnicianList()
			},
			//搜索技师
			searchJs(e) {
				console.log(e)
				this.listPage = 1;
				this.technicianList = []
				this.getTechnicianList()
			},
			// 预约
			subscribe(i) {
				console.log(this.optionId)
				if(this.optionId){
					console.log(this.$mp.page.route,'------------当前页面')
					// #ifdef H5
					uni.setStorageSync('order_url',window.location.href)
					// #endif
					// #ifdef APP-PLUS
					uni.setStorageSync('order_url',this.$mp.page.route)
					// #endif
				}
				if (!uni.getStorageSync('token')) {
					uni.showToast({
						title: '请登录',
						icon: "none"
					})
					let url = ""
					// #ifdef H5
					if(navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1){
						url = '/pages/login/index'
					}else{
						if(this.phone_login){
							url = '/pages/login/login'
						}else{
							url = '/pages/login/index'
						}
					}
					// #endif
					// #ifdef APP-PLUS
					url = '/pages/login/login'
					// #endif
					setTimeout(()=>{
						uni.reLaunch({
							url:url
						})
					},1500)
					return false;
				}
				if (this.userInfo.bind_phone != 1) {
					uni.showToast({
						title: '未绑定手机号',
						icon: "none"
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/index'
						})
					}, 1500)
					return false;
				}
				this.technician = this.technicianList[i]
				this.technicianId = this.technicianList[i].id
				console.log(this.technician, '---------------------------eeee')
				console.log(this.optionId, '-----------------------optionId')
				this.technicianDetail = JSON.parse(JSON.stringify(this.technicianList[i]))
				if (this.optionId == "") {
					this.detailFlag = true
					this.subscribeFlag = true
					this.getProject()
				} else {
					var arr = this.projectList.filter((el) => {
						return el.id == this.optionId
					})
					console.log(arr, '--------------arr')
					arr[0].projecNum = 1
					var products = []
					products.push({
						product_id: arr[0].id,
						num: arr[0].projecNum
					})
					let data = {
						products,
						technician_id: this.technician.id
					}
					let orderDetail = {
						data,
						technician: this.technician,
						project: arr
					}
					console.log(orderDetail, '------------------orderDetail')
					//订单详细信息缓存，等待支付页获取
					uni.setStorageSync('orderDetail', JSON.stringify(orderDetail))
					uni.navigateTo({
						url: `/pages/orders/orderPay/orderPay`
					})
				}
			},
			// 数量修改
			changeNum(index, i) {
				if (i == 1) { //1代表减少
					if (this.projectList[index].projecNum > 0) {
						this.projectList[index].projecNum--
					} else {
						this.projectList[index].projecNum = 0
					}
				} else {
					this.projectList[index].projecNum++
				}
			},
			//订单支付
			goOrderPay() {
				var arr = this.projectList.filter((el) => {
					return el.projecNum > 0
				})
				if (arr.length == 0) {
					uni.showToast({
						title: '请选择项目',
						icon: 'none'
					})
					return false;
				}
				let severTime = ""; //服务时间(显示)  
				let storageTime = ""; //服务时间(调接口用)
				let products = [];
				console.log(arr,'-----------------arr')
				arr.forEach((item, index) => {
					products.push({
						product_id: item.id,
						num: item.projecNum
					})
				})
				let data = {
					products,
					technician_id: this.technician.id
				}
				let orderDetail = {
					data,
					technician: this.technician,
					project: arr
				}
				//订单详细信息缓存，等待支付页获取
				uni.setStorageSync('orderDetail', JSON.stringify(orderDetail))
				uni.navigateTo({
					url: `/pages/orders/orderPay/orderPay`
				})


			},
			//获取服务列表
			getProject() {
				this.$http({
					url: `/api/product/list?page=${this.page}&limit=${this.limit}&technician_id=${this.technicianId}`,
					method: 'get',
					success: result => {
						console.log(result)
						console.log(result,'------------------------------获取服务列表')
						let data = result.data.list
						data.forEach((item, index) => {
							item.projecNum = 0 //每条数据添加数量字段  sales：销量    projecNum：当前服务项目的数量
						})
						this.projectList = data
					}
				})
			},
			//获取技师列表
			getTechnicianList(type) {
				this.$http({
					url: `/api/technician/list?page=${this.listPage}&limit=${this.listLimit}&keywords=${this.searchName}&product_id=${this.optionId}&longitude=${this.latLon.longitude}&latitude=${this.latLon.latitude}&city_name=${this.city}`,
					// url:`/api/technician/list?keywords=&longitude=&latitude=&city_name=`,
					method: 'get',
					success: result => {
						let list = result.data.list
						if (this.listPage > 1) {
							this.technicianList = this.technicianList.concat(list)
						} else {
							this.technicianList = list
							// 第一页获取城市列表
							let cityList = result.data.city_list
							console.log(result,'------------------------------获取技师列表')
							// cityList.forEach(i => {
							// 	console.log('cityList',i)
							// 	if (i.selected == 1) {
							// 		this.city = i.name
							// 	}
							// })
							console.log(this.technicianList,'---------------------技师')
							
						}
						if (type) {
							// 下拉刷新
							uni.showToast({
								title:'刷新成功'
							})
							uni.stopPullDownRefresh()
						}
						if (this.technicianList.length == 0) {
							this.notList = true
							uni.showToast({
								title: '暂无数据',
								icon: "none"
							})
						}else{
							this.notList = false;
						}
						// let data = this.technicianList;
						// if (data.length == 0) {
						// 	this.technicianList = result.data.list
						// } else {
						// 	this.technicianList = data.concat(result.data.list)
						// } 
						
						// if (this.technicianList.length == 0) {
						// 	uni.showToast({
						// 		title: '暂无数据',
						// 		icon: "none"
						// 	})
						// } else {
						// 	this.notList = false
						// }
						this.showloadding = false;
						this.$forceUpdate()
					}
				})
			},
			//地址逆解析显示对应城市
			getCity() {
				let that = this;
				// #ifdef H5
				// uni.showLoading({
				// 	title: '加载中..',
				// 	duration: 1000
				// })
				// this.city = '长沙'
				this.index = 1
				this.getCityList()
				// this.getTechnicianList('down')
				// uni.hideLoading()
				// let latLon = JSON.parse(uni.getStorageSync('latLon'))
				let latLon = this.latLon;
				let url = `https://apis.map.qq.com/ws/geocoder/v1/?location=`
				this.$jsonp(url, {
					key: 'QB3BZ-OTMRD-VTN4B-HOE6U-7IOZ6-AVFX4',
					location: `${latLon.latitude},${latLon.longitude}`,
					output: 'jsonp'
				}).then(res => {
					console.log(res, '-------------------------res逆解析')
					// uni.showModal({
					// 	title:'',
					// 	content:res.result.address
					// })
					if (res.status == 0) {
						// that.city = res.result.address_component.city
						let city = res.result.address_component.city.replace('市','')
						console.log(city)
						that.cityArr.forEach((item,index)=>{
							console.log(item,'-----------------------------item')
							if(item.name.replace('市','') == city){
								this.city_id = item.id
								that.index = index
							}
						})
						that.city = city
						// that.index = 1
						// that.getCityList()
						that.getTechnicianList('down')
					}
				})
				// #endif
				// #ifndef H5
				uni.authorize({
					scope: "scope.userLocation",
					success: () => {
						uni.showLoading({
							title: '获取地理位置中',
							duration: 1000
						})
						navigator.geolocation.getCurrentPosition((res) => {
							let url = `https://apis.map.qq.com/ws/geocoder/v1/?location=`
							this.$jsonp(url, {
								key: 'QB3BZ-OTMRD-VTN4B-HOE6U-7IOZ6-AVFX4',
								location: `${res.coords.latitude},${res.coords.longitude}`,
								output: 'jsonp'
							}).then(res => {
								console.log(res, '-------------------------res')
								if (res.status == 0) {
									setTimeout(() => {
										uni.hideLoading({
											success: result => {
												that.city = res.result.address_component.city
												// that.city = '长沙市'
												that.getTechnicianList()
												that.getCityList()
											}
										})
									}, 1000)
							
								}
							})
						}, function(error) {
							uni.showToast({
								title: '加载失败,请刷新重试',
								icon: "none"
							})
						});
						
						// uni.getLocation({
						// 	success: (result) => {
						// 		// uni.showModal({
						// 		// 	title: `经纬度 ${result}`
						// 		// })
						// 		let url = `https://apis.map.qq.com/ws/geocoder/v1/?location=`
						// 		this.$jsonp(url, {
						// 			key: 'QB3BZ-OTMRD-VTN4B-HOE6U-7IOZ6-AVFX4',
						// 			location: `${result.latitude},${result.longitude}`,
						// 			output: 'jsonp'
						// 		}).then(res => {
						// 			console.log(res, '-------------------------res')
						// 			if (res.status == 0) {
						// 				setTimeout(() => {
						// 					uni.hideLoading({
						// 						success: result => {
						// 							that.city = res.result.address_component.city
						// 							// that.city = '长沙市'
						// 							that.getTechnicianList()
						// 							that.getCityList()
						// 						}
						// 					})
						// 				}, 1000)

						// 			}
						// 		})
						// 	}
						// })
					}
				})
				// #endif
			},
			//获取评论列表
			getComments() {
				this.$http({
					url: `/api/technician/comment/list/${this.technicianDetail.id}?page=${this.commentPage}&limit=${this.commentLimit}`,
					method: 'get',
					success: result => {
						// uni.hideLoading()
						let data = this.commentList
						if(this.commentList.length == 0){
							this.commentList = result.data.list
						}else{
							this.commentList = data.concat(result.data.list)
						}
					}
				})
			},
			guanzhu(){
				uni.navigateTo({
					url:'/pages/my/collection/collection'
				})
			}
		}
	}
</script>
<style>
	page{
		width: 100%;
		height: 100%;
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.technician {
		width: 100%;
		// height: 100%;
		display: flex;
		flex-direction: column;
		.not_follow{
			margin-top: 50px;
		}
		.exin{
			width: 100%;
			// height: 50px;
			z-index: 999;
			padding: 10rpx;
			box-sizing: border-box;
			background: #fff;
			color: #666;
			position: fixed;
			top: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 23upx;
			>.logo{
				width: 62rpx;
				height: 62rpx;
				>image{
					width: 100%;
					height: 100%;
				}
			}
			.text{
				flex: 1;
				padding-left: 10rpx;
			}
			.button{
				margin-right: 10rpx;
				background: #24D572;
				padding:1px 20rpx;
				border-radius: 40rpx;
				color: #fff;
				font-size: 22rpx;
			}
			.close{
				justify-content: flex-end;
			}
		}
		.top_nav{
			height: 500rpx;
			width: 100%;
			background: linear-gradient(#32d699, #fff);
			.flex{
				display: flex;
			}
			.top{
				padding: 20rpx 30rpx;
				align-items: center;
				.jus{
					justify-content: space-between;
					width: 100%;
				}
				.left{
					display: flex;
					align-items: center;
					font-weight: bold;
					font-size: 26rpx;
					width: 150rpx;
				}
				.main {
					flex: 1;
					height: 64rpx;
					display: flex;
					align-items: center;
					// border: 1px solid #eee;
					// border-radius: 5px;
					background-color: #fff;
					position: relative;
					border-radius: 50rpx;
					padding-left: 10rpx;
					input {
						text-indent: 20rpx;
					}
				}
				.attention{
					display: flex;
					align-items: center;
					font-weight: bold;
					font-size: 26rpx;
					margin-left: 20rpx;
					text{
						margin-left: 5rpx;
					}
				}
			}
		}
		.list_container{
			padding-bottom: 130rpx;
			margin-top: -420rpx;
			flex: 1;
			// overflow-y: auto;
		}
		.list{
			// height: 100%;
			box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
			margin: 0 30upx;
			margin-top: 20upx;
			background-color: #fff;
			border-radius: 30upx;
			padding: 30upx 20upx;
			box-sizing: border-box;
			&:first-child{
				margin-top: 30upx;
			}
			.top{
				display: flex;
				.left{
					width: 120upx;
					height: 120upx;
					margin-right: 20upx;
					image{
						border-radius: 50%;
						width: 100%;
						height:100%;
					}
				}
				.right{
					flex:1;
					.right_top{
						margin-bottom: 12upx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						&:last-child{
							margin-bottom: 0;
						}
						.top_left{
							display: flex;
							align-items: center;
							.name{
								font-size: 30upx;
								font-weight: bold;
								margin-right: 20upx;
							}
							.inoculation{
								display:flex;
								align-items: center;
								image{
									width: 34rpx;
									height: 30rpx;
								}
								text{
									color: #189556;
									font-size: 24rpx;
									margin-left: 5rpx;
								}
							}
							.score{
								display: flex;
								align-items: center;
								padding-right: 10rpx;
								border-right: 4rpx solid #cacaca;
								height: 30rpx;
								line-height: 30rpx;
								text{
									color: #fe6d1b;
									font-size: 26rpx;
								}
							}
							.served{
								padding-left: 10rpx;
								color: #666;
								font-size: 24rpx;
							}
							.comment{
								padding-left: 10rpx;
								font-size: 26rpx;
								color: #666;
								&:first-child{
									padding-right: 10rpx;
									border-right: 4rpx solid #cacaca;
									height: 30rpx;
									display: flex;
									align-items: center;
								}
							}
						}
						.top_right{
							display: flex;
							align-items: center;
							.distance{
								margin-left: 5rpx;
							}
							image{
								width: 40rpx;
								height: 40rpx;
								margin-left: 20rpx;
								&:last-child{
									margin-left: 20rpx;
								}
								// &:nth-child(4) ~ image{
								// 	display: none;
								// } 
							}
							.time{
								color: #fe832f;
								font-size: 26rpx;
							}
						}
					}
				
				}
			}
			.bot{
				display: flex;
				justify-content: space-between;
				margin: 15upx 0;
				margin-bottom: 0;
				align-items: center;
				.btn_f{
					width: 48%;
					border: 2rpx solid #21b45e;
					padding: 10upx 0;
					box-sizing: border-box;
					justify-content: center;
					border-radius: 40upx;
					display: flex;
					align-items: center;
					color: #21b45e;
					font-weight: bold;
					image{
						margin-right: 5rpx;
						width: 35rpx;
						height: 35rpx;
					}
				}
				.btn_l{
					width: 48%;
					border: 2rpx solid transparent;
					background: linear-gradient(116.3deg, #35dba0, #35dba0 0, #18b567 111.69%, #18b567 0);
					padding: 10upx 0;
					box-sizing: border-box;
					justify-content: center;
					border-radius: 40rpx;
					display: flex;
					align-items: center;
					color: #fff;
					font-weight: bold;
				}
				.is_busy{
					background: #eee;
					color: #666;
				}
			}
		}
		.technician_details {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			position: fixed;
			bottom: 0;
			margin-bottom: var(--window-bottom);
			z-index: 999;
			.top_seat {
				height: 150px;
				background: #000;
				opacity: 0.5;
				z-index: 2;
			}
		
			.comment {
				flex: 1;
				display: flex;
				flex-direction: column;
				background: #f5f5f5;
				box-shadow: 0 5px 8px rgba(0, 0, 0, 0);
				overflow-x: hidden;
				z-index: 2;
		
				.js_introduce {
					height: 90px;
					margin: 13px 12px 0 12px;
					border: 1px solid #24D576;
					border-radius: 7px;
					background-color: #fff;
					box-shadow: 0 5px 8px rgba(0, 0, 0, 0);
					display: flex;
		
					.js_photo {
						width: 60px;
						height: 60px;
						margin: 14px 13px;
						border-radius: 50%;
						overflow: hidden;
		
						>image {
							width: 100%;
							height: 100%;
						}
					}
		
					.js_message {
						flex: 1;
						height: 100%;
						display: flex;
						flex-direction: column;
						-webkit-flex-direction: column;
						justify-content: center;
						-webkit-justify-content: center;
						padding-right: 10px;
		
						.top_msg {
							// margin-top: 35px;
							display: flex;
		
							// justify-content: space-around;
							.technician_name {
								font-size: 14px;
								color: #000;
								margin-right: 9px;
								margin-bottom: 5px;
							}
		
							.work_year{
								font-size: 14px;
								font-weight: 500;
								color: #2BE17F;
								margin-right: 15px;
							}
							.score{
								display: flex;
								align-items: center;
								>image{
									width: 12.5px;
									height: 12.5px;
									margin-right: 5px;
								}
							}
						}
		
						.Introduction {
							font-size: 12px;
							color: #818181;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}
		
						// .main{
						// 	font-size: 20upx;
						// }
		
						// .bottom_msg{
						// 	display: flex;
						// 	align-items: center;
						// 	justify-content: space-around;
						// 	// margin-top:30px;
						// 	view{
						// 		display: flex;
						// 		align-items: center;
						// 		margin-right: 5px;
						// 	}
						// 	image{
						// 		width: 15px;
						// 		height: 15px;
						// 		margin-right: 2px;
						// 	}
						// }
					}
				}
		
				.aptitude {
					height: 66upx;
					line-height: 66upx;
					background-color: #fff;
					display: flex;
					justify-content: space-evenly;
					align-items: center;
					margin: 10px;
					border-radius: 5upx;
		
					image {
						width: 15px;
						height: 15px;
						margin-right: 5px;
					}
		
					>view {
						display: flex;
						font-size: 12px;
						align-items: center;
					}
				}
		
				.comment_list {
					flex: 1;
					margin: 0 12px;
					background-color: #fff;
					margin-bottom: 10px;
					padding: 10px;
					border-radius: 7px;
					overflow-y: auto;
					.comment_list_item {
						display: flex;
						flex-direction: column;
						border-bottom: 1px solid #eee;
						margin-top: 10px;
						font-size: 12px;
						color: #474747;
		
						.user_detail {
							display: flex;
							justify-content: space-between;
		
							.user_name {
								display: flex;
								align-items: center;
		
								text {
									font-size: 15px;
									margin-right: 5px;
									max-width: 120px;
									text-overflow: ellipsis;
									white-space: nowrap;
									overflow: hidden;
								}
		
								image {
									width: 12px;
									height: 12px;
								}
							}
		
							.comment_time {
								font-size: 14px;
								color: #9799ac;
							}
						}
						.comment_tags{
							display: flex;
							align-items: center;
							flex-wrap: wrap;
							.tags_item{
								width: 23%;
								margin:10upx 1%;
								background-color: #eee;
								color: #999;
								border-radius: 10upx;
								text-align: center;
							}
						}
						.comment_text {
							padding: 5px 0;
						}
		
						.comment_label {
							margin-bottom: 20rpx;
						}
					}
		
					.no_comment {
						font-size: 24px;
						color: #656565;
					    position: absolute;
					    top: 50%;
					    left: 50%;
					    transform: translate(-50%,-50%);	
					}
				}
		
				.project_list {
					flex: 1;
					margin: 0 12px;
					border-radius: 7px;
					padding-bottom: 100upx;
					overflow-y: auto;
					// overflow-x: hidden;
					.project_list_item {
						// height: 81px;
						display: flex;
						justify-content: space-around;
						align-items: center;
						background-color: #fff;
						margin-bottom: 10px;
						border-radius: 8px;
						padding: 10px 0;
		
						.image {
							width: 89px;
							height: 69px;
							padding: 0 10px;
		
							>image {
								border-radius: 6px;
								width: 100%;
								height: 100%;
							}
						}
		
						.project_content {
							flex: 1;
							display: flex;
		
							.project_detail {
								flex: 1;
								display: flex;
								flex-direction: column;
		
								.title {
									font-size: 12px;
									color: #2e2e2e;
									margin-right: 2px;
									width: 80px;
									overflow: hidden;
									white-space: normal;
									flex-wrap: nowrap;
									height: 25px;
								}
		
								.time {
									// width: 70px;
									display: flex;
									align-items: center;
									font-size: 14px;
		
									.time_image {
										width: 14px;
										height: 14px;
		
										>image {
											width: 100%;
											height: 100%;
											margin-bottom: 5px;
										}
									}
		
									>text {
										margin-left: 5px;
									}
								}
		
								.content {
									display: flex;
									align-items: center;
									margin-top: 10px;
		
									.price {
										font-size: 14px;
										color: #fa3733;
										font-weight: bold;
										margin-right: 15px;
		
										>text {
											font-size: 20px;
										}
									}
		
									.number {
										color: #666;
										font-size: 12px;
									}
		
								}
							}
		
							.project_num {
								width: 80px;
								padding-right: 5px;
								display: flex;
								align-items: center;
								justify-content: space-around;
							}
						}
					}
				}
			}
		}
		.submit {
			width: 100%;
			height: 50px;
			padding: 5px 0;
			position: fixed;
			bottom: 0;
			background-color: #FFF;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: var(--window-bottom);
			z-index: 9999;
		
			.all_price {
				margin-left: 25px;
				font-size: 14px;
				color: #fa3733;
		
				text {
					font-size: 18px;
					font-weight: 600;
				}
			}
		
			.submit_button {
				margin-right: 25px;
				width: 160px;
				height: 40px;
				line-height: 40px;
				font-size: 16px;
				color: #fff;
				background-color: #24D576;
				border-radius: 5px;
				text-align: center;
			}
		}
		
		uni-scroll-view{
			width: auto !important; 
		}
		.overflow {
			overflow: hidden;
		}
	}
	/deep/.fui-dialog__inner{
		width: 520upx;
	}
	/deep/.fui-dialog__title{
		// display: none;
	}
	/deep/.fui-dialog__btn{
		font-size: 32upx !important;
	}
	/deep/.fui-dialog__btn-first{
		font-weight: normal;
	}
	/deep/.fui-dialog__body{
		// padding-top: 70upx;
	}
	.overflow{
		overflow: hidden;
	}
</style>
